
<template>
  <div class="app-container">
    <div class="app-container-nav">
      <router-link class="container-nav-item" :to="to" v-for="{ name, to } in routers" :key="name">{{ name }}</router-link>
    </div>
    <div class="router-content">
      <router-view></router-view>
    </div>

    <e-backtop :target="'.router-content'" :right="100" :bottom="100" @click="backTopClick" />

  </div>
</template>
<script>
export default {
  data() {
    return {
      routers: [
        {
          name: 'Affix',
          to: '/affix',
        },
        {
          name: 'Alert',
          to: '/alert',
        },
        {
          name:'Anchor',
          to:'/anchor'
        },
        {
          name: 'AutoComplete',
          to: '/auto-complete',
        },
        {
          name: 'Avatar',
          to: '/avatar',
        },
        {
          name: 'AvatarList',
          to: '/avatarList',
        },
        {
          name: 'Backtop',
          to: '/backtop',
        },
        {
          name: 'Badge',
          to: '/badge',
        },
        {
          name: 'Button',
          to: '/button',
        },
        {
          name: 'breadcrumb',
          to: '/breadcrumb',
        },
        {
          name:'Calendar',
          to:'/calendar'
        },
        {
          name: 'Cascader',
          to: '/cascader',
        },
        {
          name: 'Card',
          to: '/card',
        },
        {
          name: 'Carousel',
          to: '/carousel',
        },
        {
          name: 'Checkbox',
          to: '/checkbox',
        },
        {
          name: 'Circle',
          to: '/circle',
        },
        {
          name: 'Collapse',
          to: '/collapse',
        },
       
        {
          name: 'col/row',
          to: '/col',
        },
        {
          name: 'color-picker',
          to: '/color-picker',
        },
        {
          name: 'Copy',
          to: '/copy',
        },
        {
          name:'count-up',
          to:'/count-up'
        },
        {
          name:'countdown',
          to:'/countdown'
        },
        {
          name: 'DatePicker',
          to: '/date-picker',
        },
        {
          name: 'Divider',
          to: '/divider',
        },
        {
          name: 'Drawer',
          to: '/drawer',
        },
        {
          name: 'dropdown',
          to: '/dropdown',
        },
        {
          name:'ellipsis',
          to:'/ellipsis'
        },
        {
          name: 'Form',
          to: '/form',
        },
        {
          name: 'Icon',
          to: '/icon',
        },
        {
          name: 'Image',
          to: '/image',
        },
        {
          name: 'Input',
          to: '/input',
        },
        {
          name: 'InputNumber',
          to: '/input-number',
        },
        {
          name: 'Infinite-Scroll',
          to: '/infinite-scroll',
        },
        {
          name: 'Layout',
          to: '/layout',
        },
        {
          name:'LoadingBar',
          to:'/loadingbar'
        },
        {
          name: 'Menu',
          to: '/menu',
        },
        {
          name: 'Message',
          to: '/message',
        },
        {
          name: 'modal',
          to: '/modal',
        },
        {
          name: 'notice',
          to: '/notice',
        },
        {
          name: 'Page',
          to: '/page',
        },
        {
          name: 'popconfirm',
          to: '/popconfirm',
        },
        {
          name: 'Progress',
          to: '/progress',
        },
        {
          name: 'Rate',
          to: '/rate',
        },
        {
          name: 'Radio',
          to: '/radio',
        },
        {
          name:'Scrollbar',
          to:'/scrollbar'
        },
        {
          name: 'search',
          to: '/search',
        },
        {
          name: 'SearchPane',
          to: '/search-pane',
        },
        {
          name: 'Select',
          to: '/select',
        },
        {
          name: 'slider',
          to: '/slider',
        },
        {
          name:"Space",
          to:"/space"
        },
        {
          name: 'Spin',
          to: '/spin',
        },
        {
          name: 'Switch',
          to: '/switch',
        },
        {
          name: 'Steps',
          to: '/steps',
        },
        {
          name: 'table',
          to: '/table',
        },
        {
          name: 'Tabs',
          to: '/tabs',
        },
        {
          name: 'Tag',
          to: '/tag',
        },
        {
          name: 'Timeline',
          to: '/timeline',
        },
        {
          name: 'TimePicker',
          to: '/time-picker',
        },
        {
          name: 'tooltip',
          to: '/tooltip',
        },
        {
          name: 'Transfer',
          to: '/transfer',
        },
        {
          name: 'Tree(废弃)',
          to: '/tree',
        },
        {
          name: 'Tree-V2',
          to: '/tree-v2',
        },
        {
          name: 'TreeSelect',
          to: '/tree-select',
        },
        {
          name: 'Upload',
          to: '/upload',
        },
        {
          name:'Watermark',
          to:'/watermark'
        }
      ]
    }
  },
  methods: {
    backTopClick(e) {
      console.log('/////backtop', e)
    }
  }
}
</script>
<style lang="less">
@import '../src/styles/index.less';
/*
  验证暗黑模式，打开
*/
// @import '../src/styles/index-dark.less';
// body{
//   background:#000;
// }

.app-container {
  display: flex;
  width: 100wh;
  height: 100vh;
  overflow: hidden;
}

.app-container-nav {
  height: 100%;
  width: 160px;
  padding-bottom: 16px;
  box-sizing: border-box;
  overflow: hidden;

  &:hover {
    overflow-y: auto;
  }
}

.router-content {
  flex: 1;
  padding: 36px;
  overflow-y: auto;
}

.container-nav-item {
  display: flex;
  align-items: center;
  height: 64px;
  padding-left: 46px;
  color: var(--color-text);

  &:hover {
    background: @color-brand-hover-sec;
  }

  &.router-link-active {
    color: #337dff;
    background: @color-brand-press-sec;
    border-left: 4px solid #337dff;

    .icon {
      fill: #337dff;
    }
  }
}

.demo-inner-divider {
  color: #6f7d96;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
  padding-bottom: 3px;
  margin-top: 30px;
}

.demo-inner-desc {
  margin-bottom: 10px;
}

.column-divider {
  display: flex;
}

.column-divider>div {
  flex: 1;
}
</style>
